<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head-template">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/animated.min.css" th:href="@{/css/animated.min.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="../static/lib/highlight-js/styles/atom-one-dark-reasonable.min.css"
          th:href="@{/lib/highlight-js/styles/atom-one-dark-reasonable.min.css}">
    <link rel="stylesheet" href="../static/css/custom.css" th:href="@{/css/custom.css}">

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/lib/scrollTo/jquery.scrollTo.min.js"
            th:src="@{/lib/scrollTo/jquery.scrollTo.min.js}"></script>
    <script src="../static/lib/waypoint-js/jquery.waypoints.min.js"
            th:src="@{/lib/waypoint-js/jquery.waypoints.min.js}"></script>
    <!-- Highlight.js 代码高亮 JS 文件引入 -->
    <script src="../static/lib/highlight-js/highlight.min.js" th:src="@{/lib/highlight-js/highlight.min.js}"></script>
    <script src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
    <script src="../static/lib/qrcode-js/qrcode.min.js" th:src="@{/lib/qrcode-js/qrcode.min.js}"></script>

    <!--    <title th:replace="${title}">今日摸鱼</title>-->
    <title>今日摸鱼</title>
</head>
<body>

<!--
    导航模板
    拿到一个 n 的 number 进行判断
    到页面上时候加上数字即可
-->

<nav th:fragment="nav-menu-template(n)"
     class="ui teal inverted attached segment custom-padded-tb-mini custom-nav-shadow-small animate__animated animate__fadeIn">
    <div class="ui container">
        <div class="ui secondary stackable menu">
            <h1 class="ui black header item">今日摸鱼</h1>
            <a href="/" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==1} ? 'active'">
                <i class="home icon"></i>
                首页
            </a>
            <a href="./diary" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==2} ? 'active'">
                <i class="edit icon"></i>
                日记
            </a>
            <a href="./categories" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==3} ? 'active'">
                <i class="folder open icon"></i>
                分类
            </a>
            <a href="./archives" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==4} ? 'active'">
                <i class="archive icon"></i>
                归档
            </a>
            <a href="./comments" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==5} ? 'active'">
                <i class="comments icon"></i>
                留言板
            </a>
            <a href="./images" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==6} ? 'active'">
                <i class="image icon"></i>
                图库</a>
            <a href="./coding" class="click-to-show-nav-menu-list item custom-mobile-hide-menu"
               th:classappend="${n==7} ? 'active'">
                <i class="terminal icon"></i>
                Coding
            </a>

            <!-- 搜索栏 -->
            <div class="click-to-show-nav-menu-list right item custom-mobile-hide-menu">
                <div class="ui icon transparent input">
                    <input type="text" placeholder="Search ...">
                    <i class="search link icon "></i>
                </div>
            </div>
        </div>
    </div>

    <!--
                控制手机/PC 端的菜单栏显示布局
                若： 手机端 隐藏菜单栏 显示一个按钮，点击显示菜单栏
                否则： 隐藏按钮，菜单栏无变化

        方便 JQuery 获取 Class 中 menu toggle 字样
        当作一个变量名？来进行值/状态的访问和修改
     -->
    <div class="ui menu toggle teal icon button custom-mobile-show-menu-position custom-mobile-show-menu-button">
        <i class="sidebar icon"></i>
    </div>

</nav>


</body>
</html>